<template>
  <view class="selector-item">
    <view class="selector-item_checkbox">
      <ve-icon v-if="selected" name="icon-checkbox-select" width="28"></ve-icon>
      <ve-icon v-else name="icon-checkbox" width="28"></ve-icon>
    </view>
    <view class="selector-item_label">
      {{ record.label }}
      <ve-tag :color="record.option.orderType == 2 ? 'blue' : 'orange'" plain :title="record.option.orderTypeStr"> </ve-tag>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'

  const props = defineProps({
    selected: Boolean,
    record: Object,
  })

  const orderName = ref('')
  if (props.orderType == 2) {
    orderName.value = '短租'
  } else {
    orderName.value = '长租'
  }
</script>

<style lang="less" scoped>
  .selector-item {
    position: relative;
    background: #ffffff;
    border-radius: 8rpx;
    padding: 32rpx;
    margin: 24rpx;

    &_checkbox {
      position: absolute;
      top: 44rpx;
      right: 32rpx;
    }

    &_label {
      margin-right: 24px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      line-height: 44rpx;
      font-size: 32rpx;
    }

    &_desc {
      margin-top: 16rpx;
      margin-right: 24px;
      font-size: 28rpx;
      font-weight: 400;
      color: #8491a8;
      line-height: 40rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
</style>
